<template>
	<div class="vehicle-manager-info">
		<div class="main_content">
			<div class="main_content_title">
				<div class="left">
					<span>{{ propUpType === 'add' ? $t('publicBtn.add') : propUpType === 'edit' ? $t('publicBtn.edit') :
						$t('publicBtn.detail') }}</span>
					<template v-for="(item, index) in $route.meta.title">
						<span v-if="languageId === item.langId">{{ item.name }}</span>
					</template>
				</div>
				<div class="right" />
			</div>
			<div class="main_content_con">
				<!-- 语言动态标签页面 -->
				<el-row :gutter="24">
					<el-col :span="16">
						<elTabPane :isShow="isTag" :tagId="tagId" @tagClick="tagClick"></elTabPane>
					</el-col>
				</el-row>
				<el-form ref="info" :model="info" :rules="rules" class="demo-ruleForm">
					<el-form v-for="(info, index) in info.list" :ref="`info${index}`" :model="info" :rules="rules"
						v-show="tagId === info.langId" :key="index" label-width="110px" class="demo-ruleForm">
						<div class="content_info" v-if="propUpType !== 'detail'">
							<el-row :gutter="24">
								<el-col :span="14">
									<el-form-item :label="$t('publicFormLabel.brandName')" prop="brandId">
										<el-select v-model="info.brandId" filterable :placeholder="$t('placeholderTip.enter')"
											style="width:100%" @change="copyValue('list', 'brandId', info.brandId)">
											<el-option v-for="item in brandList" v-bind:key="item.brandId" :label="item.name"
												:value="item.id" />
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="14">
									<el-form-item :label="$t('publicFormLabel.seriesName')" prop="seriesId">
										<el-select v-model="info.seriesId" filterable :placeholder="$t('placeholderTip.enter')"
											style="width:100%" @change="copyValue('list', 'seriesId', info.seriesId)">
											<el-option v-for="item in seriesList" v-bind:key="item.id" :label="item.name" :value="item.id" />
										</el-select>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="14">
									<el-form-item :label="$t('publicFormLabel.carYear')" prop="carYear">
										<el-date-picker v-model="info.carYear" value-format="yyyy" format="yyyy" type="year"
											:placeholder="$t('placeholderTip.pSelect')" style="width:100%"
											@change="copyValue('list', 'carYear', info.carYear)">
										</el-date-picker>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="14">
									<el-form-item :label="$t('publicFormLabel.style')" prop="style">
										<el-input v-model="info.style" :placeholder="$t('placeholderTip.enter')" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="14">
									<el-form-item :label="$t('formLabel.modelName')">
										<el-input disabled v-model="info.name" :placeholder="$t('placeholderTip.bringOut')" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="14">
									<el-form-item :label="$t('publicFormLabel.guidePrice')" prop="guidancePrice">
										<el-input :placeholder="$t('placeholderTip.enter')" v-model="info.guidancePrice"
											@change="copyValue('list', 'guidancePrice', info.guidancePrice)">
											<template slot="prepend">
												<span v-if="info.langId === 1">{{ $t('text.priceUnit') }}</span>
												<span v-else>{{ $t('text.priceDollar') }}</span>
											</template>
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="20">
									<el-form-item :label="$t('formLabel.carModelPictures')">
										<div class="cardBox" style="margin-right:16px">
											<div class="avatar-uploader">
												<upload-img customsrc="true" :defsrc="info.image"
													:on-success="function (res, file) { return handleAvatarSuccess(res, file, info, 'image') }">
													<i class="el-icon-plus avatar-uploader-icon" />
												</upload-img>
											</div>
											<div class="name">{{ $t('text.size') }}:2:3</div>
											<div v-if="info.image" class="deleteImg" @click.stop="deleteImg(info, 'image')">
												<img src="@/assets/images/close.png">
											</div>
										</div>
									</el-form-item>
								</el-col>
							</el-row>
							<div class="line"></div>
							<el-row :gutter="24">
								<el-col :span="14">
									<div v-for="(item, index_keys) in info.highlightList" style="margin-top:22px">
										<el-form-item :label="$t('formLabel.modelHighlights') + (index_keys + 1)"
											:prop="'highlightList.' + index_keys + '.keys'" :rules="rules.keys">
											<div style="display:flex">
												<el-input v-model="item.keys" :placeholder="$t('placeholderTip.enter')" />
												<el-button type="danger" size="mini" @click.stop="btnDetel(info, index_keys)"
													v-if="info.highlightList.length !== 1" style="margin-left: 10px;">{{
														$t('publicBtn.delete') }}</el-button>
												<el-button type="primary" size="mini"
													v-if="(index_keys === info.highlightList.length - 1) && (info.highlightList.length < 5)"
													@click.stop="addHighlights(info)" style="margin-left: 10px;">{{ $t('publicBtn.increase')
													}}</el-button>
											</div>
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<div class="line"></div>
							<!-- 外观颜色 内饰颜色-->
							<div class="color_warp">
								<div class="color_box">
									<div class="title">{{ $t('publicFormLabel.outsideColours') }}
										<el-button type="primary" size="mini" @click="addColorData(index, 'w')" style="float:right">{{
											$t('publicBtn.add') }}</el-button>
									</div>
									<el-table :data="info.outsideColourList" border style="100%">
										<el-table-column :label="$t('publicFormLabel.outsideColours')" align="center" width="230px">
											<template slot-scope="scope">
												<el-form-item label=" " label-width="2px" :prop="'outsideColourList.' + scope.$index + '.name'"
													:rules="rules.name">
													<el-input v-if="scope.row.id && scope.row.isEdit != 1" disabled v-model="scope.row.name"
														:placeholder="$t('placeholderTip.enter')" style="width:95%"></el-input>
													<el-input v-else v-model="scope.row.name" :placeholder="$t('placeholderTip.enter')"
														style="width:95%"></el-input>
												</el-form-item>
											</template>
										</el-table-column>
										<el-table-column :label="$t('publicFormLabel.colorLabel')" align="center" width="180px">
											<template slot-scope="scope">
												<el-form-item label=" " label-width="2px" :prop="'outsideColourList.' + scope.$index + '.val'"
													:rules="rules.keys">
													<div style="display: flex;justify-content: flex-start;align-items: center;">
														<div style="display: flex;justify-content: center;">
															<el-tag size="medium" v-for="(tag, indexTag) in scope.row.val" :key="indexTag" type="info"
																:closable="!scope.row.id ? true : false" :disable-transitions="false"
																@close="handleColorClose(scope.$index, indexTag, 'w')">
																<div :style="{ width: 15 + 'px', height: 15 + 'px', background: tag }"></div>
															</el-tag>
														</div>
														<div class="block" style="display: flex;align-items: center;margin-left:10px"
															v-if="scope.row.val.length < 2 && !scope.row.id">
															<el-color-picker size="small" v-model="colors"
																@change="getChageColor($event, scope.$index, 'w', info)"></el-color-picker>
														</div>
													</div>
												</el-form-item>
											</template>
										</el-table-column>
										<el-table-column :label="$t('publicFormLabel.operate')" align="center" width="80px">
											<template slot-scope="scope">
												<el-form-item label-width="0px">
													<el-button size="mini" type="danger"
														@click.native.prevent="deleteRow(scope.row, scope.$index, 'w')">{{ $t('publicBtn.delete')
														}}</el-button>
												</el-form-item>
											</template>
										</el-table-column>
									</el-table>
								</div>
								<div class="color_box">
									<div class="title">{{ $t('publicFormLabel.insideColours') }}
										<el-button type="primary" size="mini" @click="addColorData(index, 'n')" style="float:right">{{
											$t('publicBtn.add') }}</el-button>
									</div>
									<el-table :data="info.insideColourList" border style="100%">
										<el-table-column :label="$t('publicFormLabel.insideColours')" align="center" width="230px">
											<template slot-scope="scope">
												<el-form-item label=" " label-width="2px" :prop="'insideColourList.' + scope.$index + '.name'"
													:rules="rules.name">
													<el-input v-if="scope.row.id && scope.row.isEdit != 1" disabled v-model="scope.row.name"
														:placeholder="$t('placeholderTip.enter')" style="width:95%"></el-input>
													<el-input v-else v-model="scope.row.name" :placeholder="$t('placeholderTip.enter')"
														style="width:95%"></el-input>
												</el-form-item>
											</template>
										</el-table-column>
										<el-table-column :label="$t('publicFormLabel.colorLabel')" align="center" width="180px">
											<template slot-scope="scope">
												<el-form-item label=" " label-width="2px" :prop="'insideColourList.' + scope.$index + '.val'"
													:rules="rules.keys">
													<div style="display: flex;justify-content: flex-start;align-items: center;">
														<div style="display: flex;justify-content: center;">
															<el-tag size="medium" v-for="(tag, indexTag) in scope.row.val" :key="indexTag" type="info"
																:closable="!scope.row.id ? true : false" :disable-transitions="false"
																@close="handleColorClose(scope.$index, indexTag, 'n')">
																<div :style="{ width: 15 + 'px', height: 15 + 'px', background: tag }"></div>
															</el-tag>
														</div>
														<div class="block" style="display: flex;align-items: center;margin-left:10px"
															v-if="scope.row.val.length < 2 && !scope.row.id">
															<el-color-picker size="small" v-model="colors"
																@change="getChageColor($event, scope.$index, 'n')"></el-color-picker>
														</div>
													</div>
												</el-form-item>
											</template>
										</el-table-column>
										<el-table-column :label="$t('publicFormLabel.operate')" align="center" width="80px">
											<template slot-scope="scope">
												<el-form-item label-width="0px">
													<el-button size="mini" type="danger"
														@click.native.prevent="deleteRow(scope.row, scope.$index, 'n')">{{ $t('publicBtn.delete')
														}}</el-button>
												</el-form-item>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</div>
						</div>
						<div class="content_info" v-else>
							<el-row :gutter="24">
								<el-col :span="14">
									<el-form-item :label="$t('publicFormLabel.brandName')">
										<el-input readonly v-model="info.brandName" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="14">
									<el-form-item :label="$t('publicFormLabel.seriesName')">
										<el-input readonly v-model="info.seriesName" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="14">
									<el-form-item :label="$t('publicFormLabel.carYear')">
										<el-input readonly v-model="info.carYear" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="14">
									<el-form-item :label="$t('publicFormLabel.style')">
										<el-input readonly v-model="info.style" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="14">
									<el-form-item :label="$t('formLabel.modelName')">
										<el-input disabled :value="info.name" />
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="14">
									<el-form-item :label="$t('publicFormLabel.guidePrice')">
										<el-input readonly v-model="info.guidancePrice">
											<template slot="prepend">
												<span v-if="info.langId === 1">{{ $t('text.priceUnit') }}</span>
												<span v-else>{{ $t('text.priceDollar') }}</span>
											</template>
										</el-input>
									</el-form-item>
								</el-col>
							</el-row>
							<el-row :gutter="24">
								<el-col :span="20">
									<el-form-item :label="$t('formLabel.carModelPictures')">
										<div class="cardBox" style="margin-right:16px">
											<div class="avatar-uploader">
												<upload-img :preview="true" :defsrc="info.image" disabled />
											</div>
											<div class="name">{{ $t('text.size') }}:2:3</div>
										</div>
									</el-form-item>
								</el-col>
							</el-row>
							<div class="line"></div>
							<el-row :gutter="24">
								<el-col :span="14">
									<div v-for="(item, index_keys) in info.highlightList" style="margin-top:22px">
										<el-form-item :label="$t('formLabel.modelHighlights') + (index_keys + 1)">
											<el-input readonly v-model="item.keys" />
										</el-form-item>
									</div>
								</el-col>
							</el-row>
							<div class="line"></div>
							<!-- 外观颜色 内饰颜色-->
							<div class="color_warp">
								<div class="color_box">
									<div class="title">{{ $t('publicFormLabel.outsideColours') }} </div>
									<el-table :data="info.outsideColourList" border style="100%">
										<el-table-column :label="$t('publicFormLabel.outsideColours')" prop="name" align="center"
											width="230px" />
										<el-table-column :label="$t('publicFormLabel.colorLabel')" align="center" width="180px">
											<template slot-scope="scope">
												<el-form-item label=" " label-width="2px" :prop="'outsideColourList.' + scope.$index + '.val'"
													:rules="rules.keys">
													<div style="display: flex;justify-content: flex-start;align -items: center;">
														<div style="display: flex;justify-content: center;">
															<el-tag size="medium" v-for="(tag, indexTag) in scope.row.val" :key="indexTag" type="info">
																<div :style="{ width: 15 + 'px', height: 15 + 'px', background: tag }"></div>
															</el-tag>
														</div>
													</div>
												</el-form-item>
											</template>
										</el-table-column>
									</el-table>
								</div>
								<div class="color_box">
									<div class="title">{{ $t('publicFormLabel.insideColours') }}</div>
									<el-table :data="info.insideColourList" border style="100%">
										<el-table-column :label="$t('publicFormLabel.insideColours')" prop="name" align="center"
											width="230px" />
										<el-table-column :label="$t('publicFormLabel.colorLabel')" align="center" width="180px">
											<template slot-scope="scope">
												<el-form-item label=" " label-width="2px" :prop="'insideColourList.' + scope.$index + '.val'"
													:rules="rules.keys">
													<div style="display: flex;justify-content: flex-start;align-items: center;">
														<div style="display: flex;justify-content: center;">
															<el-tag size="medium" v-for="(tag, indexTag) in scope.row.val" :key="indexTag" type="info">
																<div :style="{ width: 15 + 'px', height: 15 + 'px', background: tag }"></div>
															</el-tag>
														</div>
													</div>
												</el-form-item>
											</template>
										</el-table-column>
									</el-table>
								</div>
							</div>
						</div>
					</el-form>
				</el-form>
				<div class="footerBtn">
					<el-button @click="getCancle">{{ propUpType !== 'detail' ? $t('el.popconfirm.cancelButtonText') :
						$t('el.popconfirm.close') }}</el-button>
					<el-button v-if="propUpType !== 'detail'" type="primary" @click="addSubmitForm"
						v-loading.fullscreen.lock="fullscreenLoading">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import {
	getModelInfo,
	getPublicSysCarSeries,
	setModelSave,
	setModelUpdate
} from '@/api/basics-manager';
import UploadImgSimple from '@/components/Upload/UploadImgSimple';
import elTabPane from '@/components/el-tab-pane/index'; //语言动态标签页面
import defaultSettings from '@/settings';
export default {
	name: 'CarSeriesInfo',
	components: {
		UploadImg: UploadImgSimple,
		elTabPane,
	},
	data() {
		return {
			fileType: 'pdf',
			accept: '.pdf',
			limit: 5,
			tagId: '',//语言id 默认id 
			isTag: false,
			BASE_IMG: defaultSettings.BASE_IMG,
			info: {
				list: []
			},
			allLanguageIdbrands: [],//全部语种品牌
			allLanguageIdseriesList: [],//全部语种车系
			brandList: [], //品牌list
			seriesList: [], //车系list
			outsideDeleteList: [], //外观颜色删除保留数据
			insidedeDeleteList: [], //内饰颜色删除保留数据
			rules: {
				// 颜色
				name: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				val: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				keys: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				brandId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				seriesId: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				carYear: [
					{
						required: true,
						message: this.$t('placeholderTip.pSelect'),
						trigger: 'change'
					}
				],
				style: [
					{
						required: true,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					}
				],
				guidancePrice: [
					{
						required: false,
						message: this.$t('placeholderTip.enter'),
						trigger: 'blur'
					},
					{
						required: false,
						pattern: /^[0-9\.]+$/,
						message: this.$t('placeholderTip.enterNumber'),
						trigger: 'blur'
					}
				],
			},
			colors: null, //定义绑定色值字段
			propUpType: '', // 'add' edit detail
			fullscreenLoading: false,
			oldBrandId: ""
		}
	},
	computed: {
		languageId() {
			// 固定语种ID  1:中文  2:英文 3:俄文 4:乌语
			return this.$store.getters.languageId
		},
		languageList() {
			return this.$store.getters.languageList.length > 0 ? this.$store.getters.languageList : JSON.parse(localStorage.getItem('languageList'))
		}
	},
	watch: {
		propUpType: function (val) {
			if (val !== 'detail') {
				var timer = setTimeout(() => {
					this.showTinymce = true
					window.clearTimeout(timer)
				}, 500)
			} else {
				this.showTinymce = false
			}
		},
		languageList(val) {
			if (this.propUpType === 'add') {
				if (val) {
					// 大刷浏览器  computed 取值在mounted之后
					this.addData()
				}
			}
		},
		'info.list': {
			handler(val) {
				if (this.propUpType !== 'detail') {
					if (val) {
						this.getName(val)
					}
				}
			},
			deep: true
		}

	},
	mounted() {
		window._vm = this
		this.propUpType = this.$route.query.propUpType
		if (this.$route.query.type) {
			this.type = this.$route.query.type
		}
		this.isTag = true;
		this.tagId = this.languageId;
		if (this.$route.query.propUpType === 'add') {
			this.init("1")
			this.addData()
		} else if (this.$route.query.id) {
			if (this.propUpType === 'edit') {
				this.init("1")
			}
			this.getInfo(this.$route.query.id)
		}
	},
	created() {
	},
	activated() {
	},
	destroyed() {
	},
	methods: {
		getName(val) {
			val.map(i => {
				if (i.brandId || i.seriesId || i.carYear || i.style) {
					var brandName = ''
					var seriesName = ''
					if (this.allLanguageIdbrands.length > 0) {
						this.allLanguageIdbrands.map(j => {
							if ((i.langId === j.langId) && (j.id === i.brandId)) {
								brandName = j.name
							}
						})
					}
					if (this.allLanguageIdseriesList.length > 0) {
						this.allLanguageIdseriesList.map(j => {
							if ((i.langId === j.langId) && (j.id === i.seriesId)) {
								seriesName = j.name
							}
						})
					}
					i.name = brandName + ' ' + seriesName + ' ' + i.carYear + ' ' + i.style
				}
			})
		},
		addData() {
			this.outsideDeleteList = []
			this.insidedeDeleteList = []
			this.colors = null
			var arr = []
			this.languageList.map(i => {
				var obj = {
					langId: i.id,
					id: '',
					brandId: '', //品牌id
					brandName: '', //品牌名称
					seriesId: '', //车系id
					seriesName: '', //车系名称
					carYear: '', //年款
					name: '', //车型全称
					style: '', //款型
					guidancePrice: '', //指导价
					image: '', //车辆图片(1:1)
					status: 1, //状态 -1:删除 0:无效 1:有效
					highlightList: [{ keys: '' }],//车型亮点
					// 外观
					outsideColourList: [
						{
							name: '',
							val: [] //颜色
						}
					],
					// 内饰
					insideColourList: [
						{
							name: '',
							val: [] //颜色
						}
					]
				}
				arr.push(obj)
			})
			this.info.list = arr
		},
		// 添加亮点
		addHighlights(tar) {
			var obj = {
				keys: ''
			}
			tar.highlightList.push(obj)
		},
		// 删除亮点
		btnDetel(tar, index_keys) {
			tar.highlightList.splice(index_keys, 1)
		},
		// 富文本
		message(content) {
			if (content.msg) {
				this.info.list.map(i => {
					if (this.tagId === i.langId) {
						i[content.key] = content.msg
					}
				})
			}
		},
		//添加颜色
		addColorData(index, key) {
			this.info.list.map(i => {
				var obj = {
					name: '',
					val: []
				}
				if (key === 'w') {
					// 外观
					var arr = JSON.parse(JSON.stringify(i.outsideColourList))
					arr.push(obj)
					i.outsideColourList = arr
				} else {
					// 内饰
					var arr = JSON.parse(JSON.stringify(i.insideColourList))
					arr.push(obj)
					i.insideColourList = arr
				}
			})
		},
		// 删除
		deleteRow(row, index, key) {
			if (key === 'w') {
				this.info.list.map(i => {
					// 外观
					if (this.propUpType === 'edit' && row.id) {
						//编辑 删除颜色数据 的保留
						row.status = -1 //-1:删除 1:有效
					}
					var arr = JSON.parse(JSON.stringify(i.outsideColourList))
					arr.splice(index, 1)
					i.outsideColourList = arr
				})
				if (row.id) {
					this.outsideDeleteList.push(row)
				}
			} else {
				this.info.list.map(i => {
					// 内饰
					if (this.propUpType === 'edit') {
						//编辑 删除颜色数据 的保留
						row.status = -1 //-1:删除 1:有效
					}
					var arr = JSON.parse(JSON.stringify(i.insideColourList))
					arr.splice(index, 1)
					i.insideColourList = arr
				})
				if (row.id) {
					this.insidedeDeleteList.push(row)
				}
			}

		},
		// 获取颜色
		getChageColor(value, index, key) {
			this.info.list.map(i => {
				if (key === 'w') {
					// 外观
					var arr = JSON.parse(JSON.stringify(i.outsideColourList)) //如此为了处理push的数据出现重复
					arr[index].val.push(value)
					i.outsideColourList = arr
				} else {
					// 内饰
					var arr = JSON.parse(JSON.stringify(i.insideColourList)) //如此为了处理push的数据出现重复
					arr[index].val.push(value)
					i.insideColourList = arr
				}
			})
			this.$nextTick(() => {
				this.colors = null
			}, 1000)
		},
		// 颜色标签删除方法
		handleColorClose(index, tagIndex, key) {
			this.info.list.map(i => {
				if (key === 'w') {
					// 外观
					i.outsideColourList[index].val.splice(tagIndex, 1)
				} else {
					// 内饰
					i.insideColourList[index].val.splice(tagIndex, 1)
				}
			})
		},
		// 语言菜单处理
		tagClick(id) {
			if (id !== this.tagId) {
				this.resetForm('info', 2)
				this.tagId = id
			}
		},
		init(ids, brandId) {
			// 编辑 处理获取详情数控使得车系接口数据先返回在 在处理详情数据
			return new Promise((resolve, reject) => {
				var params = {
					ids: ids
				}
				if (ids === '5') {
					params['brandId'] = brandId
				}
				getPublicSysCarSeries(params).then(res => {
					if (res.code === 200) {
						// 品牌
						if (res.data.brands) {
							this.allLanguageIdbrands = res.data.brands
							var arr = []
							res.data.brands.map(i => {
								if (this.languageId === i.langId) {
									arr.push(i)
								}
							})
							this.brandList = arr
						}
						// 车系
						if (res.data.maxCarSeries) {
							this.allLanguageIdseriesList = res.data.maxCarSeries
							var arr = []
							res.data.maxCarSeries.map(i => {
								if (this.languageId === i.langId) {
									arr.push(i)
								}
							})
							this.seriesList = arr
						}
						resolve()
					}
				})
			}).catch(err => {
				// 错误信息 也返回resolve  让程序执行下去
				resolve()
			})
		},
		// 无多语言字段处理
		copyValue(key, key2, value) {
			this.info[key].map(i => {
				//品牌切换车系数据清除
				if (key2 === 'brandId') {
					if (this.oldBrandId != value) {
						this.init('5', value)
						this.oldBrandId = value
						i.seriesId = ''
						i.seriesName = ''
					}
				}
				i[key2] = value
			})
		},
		deleteImg(tar, key, index) {
			if (index >= 0) {
				//多张图片删除处理
				tar[key].splice(index, 1)
			} else {
				if (key === 'image') {
					this.info.list.map(i => {
						i[key] = ''
					})
				} else {
					tar[key] = ''
				}
			}
			this.$forceUpdate()
		},
		handleAvatarSuccess(res, file, tar, key, type, index) {
			if (res) {
				if (type === 'more') {
					//多张图片处理
					// 多语言字段
					if (index >= 0) {
						tar[key][index] = res.key
					} else {
						tar[key].push(res.key)
					}
				} else {
					// 多语言字段
					tar[key] = res.key
				}
				this.$forceUpdate()
			}
		},
		// 重置表单
		resetForm(vaid, type) {
			// type 1 重置表单 2仅清空校验
			if (this.$refs[vaid] !== undefined) {
				this.$nextTick(() => {
					Promise.all([
						//数组部分的表单，用map返回验证函数的调用
						...this.info.list.map((item, index) => {
							var refs = `info${index}`
							let valiForm = this.$refs?.[refs].validate
								? this.$refs?.[refs]
								: this.$refs?.[refs][0];
							if (type === 1) {
								valiForm.resetFields()
							} else {
								valiForm.clearValidate()
							}
						})

					])
				})

			}
		},
		getCheck(index) {
			var list = JSON.parse(JSON.stringify(this.info.list))
			list.splice(index, 1)
			var falg1 = []
			for (var i = 0; i < list.length; i++) {
				var item = list[i]
				// 表单校验
				var name = ''
				var outsideName = []
				var insideName = []
				item.outsideColourList.filter(item => {
					outsideName.push(item.name)
				})
				item.insideColourList.filter(item => {
					insideName.push(item.name)
				})
				// 多语言必填字段 !outsideName.some(item => item === null || item === '') 不存在在空值
				if (item.style && item.highlightList[0].keys && !outsideName.some(item => item === null || item === '') && !insideName.some(item => item === null || item === '')) {
				} else if (item.style || item.highlightList[0].keys || outsideName.some(item => item) || insideName.some(item => item)) {
					// outsideName.some(item => item)  最少存在一个值
					this.languageList.map(j => {
						if (j.id === item.langId) {
							name = j.name
						}
					})
					this.$message({
						showClose: true,
						message: name + ':' + this.$t('text.improveForms'),
						type: 'warning'
					})
					falg1.push(0)
					return false
				} else {
					falg1.push(1)
				}
			}
			var isallZeros = false
			// 判断是否包含0
			if (falg1.length > 0) {
				isallZeros = falg1.includes(0)
			}
			return !isallZeros
		},
		// 提交
		addSubmitForm() {
			var list = JSON.parse(JSON.stringify(this.info.list))
			var flag = false
			for (var i = 0; i < list.length; i++) {
				var item = list[i]
				var index = i
				// 当前语种 表单校验every
				if (this.tagId === item.langId) {
					let valiForm = this.$refs?.[`info${index}`].validate
						? this.$refs?.[`info${index}`]
						: this.$refs?.[`info${index}`][0];
					valiForm.validate((res) => {
						if (res) {
							flag = this.getCheck(index)
						} else {
							return false
						}
					})
				}
			}
			if (flag) {
				// 全部表单验证通过
				var arr = JSON.parse(JSON.stringify(this.info.list))
				var name = ''
				for (var i = 0; i < arr.length; i++) {
					var item = arr[i]
					this.languageList.map(j => {
						if (j.id === item.langId) {
							name = j.name
						}
					})
					var highlights = []
					item.highlightList.map(j => {
						if (j.keys) {
							highlights.push(j.keys)
						}
					})
					item.highlightList = highlights
					// 重复校验处理
					var s = item.highlightList
					for (var z = 0; z < highlights.length; z++) {
						if (s[z] === highlights[z + 1]) {
							this.$message({
								message: name + ':' + this.$t('placeholderTip.highlightsRepeatTip') + ':' + `${highlights[z]}`,
								type: 'warning'
							})
							return false
						}
					}

					// 颜色处理外观内饰
					var outsideColours = JSON.parse(JSON.stringify(item.outsideColourList))
					var insideColours = JSON.parse(JSON.stringify(item.insideColourList))
					var outsideName = []
					var insideName = []
					var name = ''
					if (this.propUpType === 'edit') {
						// 将外饰、内饰、删除的颜色对象 连接进去
						outsideColours.push(...this.outsideDeleteList)
						insideColours.push(...this.insidedeDeleteList)
					}
					outsideColours.filter(item => {
						item.val = item.val.toString()
						outsideName.push(item.name)
					})
					insideColours.filter(item => {
						item.val = item.val.toString()
						insideName.push(item.name)
					})

					item.outsideColourList = outsideColours || []
					item.insideColourList = insideColours || []
				}
				this.fullscreenLoading = true
				if (this.propUpType === 'add') {
					setModelSave({
						t: arr
					})
						.then(res => {
							if (res.code === 200) {
								this.$message({
									showClose: true,
									message: this.$t('text.addSucceedTip'),
									type: 'success'
								})
								this.fullscreenLoading = false
								this.getCancle()
							}
						})
						.catch(err => {
							this.fullscreenLoading = false
						})

				} else {
					setModelUpdate({
						t: arr
					})
						.then(res => {
							if (res.code === 200) {
								this.$message({
									showClose: true,
									message: this.$t('text.editSucceedTip'),
									type: 'success'
								})
								this.fullscreenLoading = false
								this.getCancle()
							}
						})
						.finally(() => {
							this.fullscreenLoading = false
						})
				}
			}
		},
		// 详情
		getInfo(id) {
			const loading = this.$loading({
				lock: true,
				text: this.$t('text.loading'),
				spinner: 'el-icon-loading',
				background: 'rgba(0, 0, 0, 0.7)'
			})
			getModelInfo(id).then(res => {
				if (res.code === 200) {
					var arr = res.data.t || []
					arr.map(i => {
						// 外观颜色数组处理
						if (i.outsideColourList) {
							i.outsideColourList.filter(item => {
								item.val = item.val.split(',')
							})
						} else {
							i.outsideColourList = []
						}
						// 内饰颜色数组处理
						if (i.insideColourList) {
							i.insideColourList.filter(item => {
								item.val = item.val.split(',')
							})
						} else {
							i.insideColourList = []
						}
					})

					if (arr.length > 0) {
						this.setInfoData(arr)
					}
					loading.close()
				}
			}).catch(() => {
				loading.close()
			})
		},

		// 详情数据处理
		async setInfoData(data) {
			if (this.propUpType === 'edit') {
				await this.init('5', data[0].brandId)
			}
			this.$nextTick(() => {
				var newArr = []
				var arr = data
				var newObj = arr[0]
				if (this.propUpType !== 'detail') {
					this.languageList.map(i => {
						var obj = {
							langId: i.id,
							id: newObj.id,
							brandId: newObj.brandId, //品牌id
							brandName: newObj.brandName, //品牌名称
							seriesId: newObj.seriesId, //车系id
							seriesName: newObj.seriesName, //车系名称
							carYear: newObj.carYear, //年款
							style: '', //款型-多语言
							name: '', //车型全称-多语言
							guidancePrice: newObj.guidancePrice, //指导价
							image: newObj.image, //车辆图片(1:1)
							highlightList: [{ key: '' }], //车型亮点 -多语言 //加默认数据
							// 外观
							outsideColourList: [],
							// 内饰
							insideColourList: []
						}
						newArr.push(obj)
					})
				} else {
					this.languageList.map(i => {
						var obj = {
							langId: i.id,
							id: '',
							brandId: '', //品牌id
							brandName: '', //品牌名称
							seriesId: '', //车系id
							seriesName: '', //车系名称
							carYear: '', //年款
							name: '', //车型全称
							style: '', //款型
							guidancePrice: '', //指导价
							image: '', //车辆图片(1:1)
							status: 1, //状态 -1:删除 0:无效 1:有效
							highlightList: [{ keys: '' }],//车型亮点--多语言
							// 外观
							outsideColourList: [
								{
									name: '',
									val: [] //颜色
								}
							],
							// 内饰
							insideColourList: [
								{
									name: '',
									val: [] //颜色
								}
							]
						}
						newArr.push(obj)
					})
				}
				arr.map(j => {
					// 根据id进行对象替换
					let index = newArr.findIndex(e =>
						e.langId === j.langId
					)
					if (index > -1) {
						// 车型亮点处理
						this.$nextTick(() => {
							var highlightList = []
							j.highlightList.map(z => {
								var obj = {
									keys: z
								}
								highlightList.push(obj)
							})
							j.highlightList = highlightList
						})
						// 替换对象
						newArr[index] = j
					}
					let index1 = newArr.findIndex(e =>
						e.langId !== j.langId
					)
					// 语种都维护不需要处理
					if (arr.length != newArr.length && index1 > -1) {
						// // 颜色处理 新增未维护的语种 编辑的时候 只需复用色值 名称无需复用，处理名称不复用
						this.$nextTick(() => {
							var arr1 = JSON.parse(JSON.stringify(newArr[index1].outsideColourList))
							arr1.map(o_i => {
								// o_i.name = ''
								o_i['isEdit'] = 1 ////可编辑
							})
							newArr[index1].outsideColourList = arr1

							var arr2 = JSON.parse(JSON.stringify(newArr[index1].insideColourList))
							arr2.map(i_n => {
								// i_n.name = ''
								i_n['isEdit'] = 1 //可编辑
							})
							newArr[index1].insideColourList = arr2
						})
					}
				})
				this.info.list = newArr

				// 处理新语种
				newArr.map(z => {
					let index2 = arr.findIndex(e =>
						e.langId === z.langId
					)
					// 查询 是否有新加进来得语种
					if (index2 <= -1) {
						var index4 = ''
						// 查询有色值得 下标
						arr.map((a, index3) => {
							if (a.insideColourList.length > 0 && a.outsideColourList.length > 0) {
								index4 = index3
							}
						})
						if (index4) {
							// 处理
							z.insideColourList = []
							z.outsideColourList = []
							arr[index4].insideColourList.map(p => {
								var color = {
									name: '',
									val: p.val
								}
								z.insideColourList.push(color)
							})
							arr[index4].outsideColourList.map(p => {
								var color = {
									name: '',
									val: p.val
								}
								z.outsideColourList.push(color)
							})
						}
					}
				})
			})
		},

		// 取消
		getCancle() {
			this.$store.state.tagsView.visitedViews.splice(
				this.$store.state.tagsView.visitedViews.findIndex(
					item => item.path === this.$route.path
				),
				1
			)
			this.$router.go(-1)
		}
	}
}
</script>
<style lang="scss" scoped>
.vehicle-manager-info {
	height: 100%;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	overflow: hidden;

	&>.main_content {
		width: 99.9%;
		height: 100%;

		&>.main_content_title {
			margin-bottom: 10px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.main_content_con {
			height: calc(100% - 40px);
			width: 100%;
			display: inline-block;
			border: 1px solid #dfe6ec;
			padding: 20px;


			&>.el-form {
				width: 100%;
				height: calc(100% - 108px);
				margin-top: 20px;
				overflow: hidden;

				&>.el-form {
					width: 100%;
					height: 100%;
				}

				::v-deep .content_info {
					width: 100%;
					height: 100%;
					overflow: hidden;
					overflow-y: auto;

					.line {
						height: 1px;
						border: 1px solid #ebeef5;
					}

					.color_warp {
						width: 100%;
						display: flex;
						justify-content: flex-start;
						overflow: auto;

						.color_box {
							width: auto;
							margin-right: 30px;

							.title {
								font-size: 16px;
								font-weight: 500;
								color: #000000;
								line-height: 22px;
								padding: 20px 0;
								font-weight: 500;
							}

							.el-tag {
								margin-left: 10px;
								width: auto !important;
								display: flex;
								justify-content: space-between;
								align-items: center;
							}

							.demo-dynamic {
								::v-deep .el-form-item__error {
									left: 5%;
								}
							}
						}
					}

					.el-table {
						::v-deep th {
							line-height: 40px;
							padding: unset;
							background-color: #f2f2f2;
						}
					}
				}
			}

			.footerBtn {
				width: 100%;
				display: flex;
				justify-content: center;
				padding-top: 10px;
			}

			.cardBox {
				width: 104px;
				height: auto;
				float: left;
				position: relative;

				&>.name {
					text-align: center;
					color: #999;
					font-size: 12px;
				}
			}

			.el-button:hover,
			.el-button:focus {
				color: #000;
			}
		}
	}
}
</style>
